/* 审批配置 */
<template>
	<div class="page">
		<div class="p-10 system-page-background b-radius-4">
			<my-form inline query :model="queryParams" :form-item="queryFormItem" :search-fn="() => refTable.reload()" />
		</div>
		<div class="flex-auto flex-col system-page-background m-t-10 b-radius-4">
			<div class="p-10">
				<el-button type="primary" icon="Plus" @click="$router.push({ name: 'system/process/flow', query: { title: '新增审批配置' } })">
					新 增
				</el-button>
			</div>
			<div class="flex-auto flex-col">
				<my-list-panel ref="refTable" :total="state.total" :load-fn="loadData">
					<template #default="scope">
						<my-table :data="state.list" :columns="state.columns">
							<template #index="{ $index }">{{ $index + 1 + (scope.page - 1) * scope.size }}</template>
							<template #category="{ row }">
								{{ selectDictLabel($store.dict.flowForm, row.category) }}
							</template>
							<template #version="{ row }">
								<el-tag type="primary">{{ row.version }}</el-tag>
							</template>
							<template #suspensionState="{ row }">
								<el-tag :type="row.suspensionState == 2 ? 'danger' : 'success'">
									{{ row.suspensionState == 2 ? '挂起' : row.suspensionState == 1 ? '激活' : '' }}
								</el-tag>
							</template>
							<template #default="{ row }">
								<my-button-text
									@click="
										$router.push({
											name: 'system/process/flow',
											query: { title: row.name, id: row.deploymentId }
										})
									"
									>设计</my-button-text
								>
								<my-button-text @click="handleDelete(row)"> 删除 </my-button-text>
								<my-button-text @click="updateState(row)">
									{{ row.suspensionState == 1 ? '挂起' : row.suspensionState == 2 ? '激活' : '' }}
								</my-button-text>
							</template>
						</my-table>
					</template>
				</my-list-panel>
			</div>
		</div>
	</div>
</template>

<script setup name="/deviceFault/business/process/index">
import { listFlow as page, deleteTask, updateStateDefinition } from '@a/business';

let queryParams = ref({
		needCount: 1
	}),
	queryFormItem = [
		{
			label: '流程名称',
			prop: 'name'
		},
		{
			label: '流程分类',
			prop: 'category',
			itemType: 'select',
			type: 'flow_form'
		}
	],
	state = ref({
		total: 0,
		list: [],
		columns: [
			{
				label: '序号',
				prop: 'index',
				width: 60
			},
			{
				label: '流程名称',
				prop: 'name',
				minWidth: 140
			},
			{
				label: '流程分类',
				prop: 'category',
				minWidth: 100
			},
			{
				label: '流程版本',
				prop: 'version',
				minWidth: 90
			},
			{
				label: '状态',
				prop: 'suspensionState',
				minWidth: 80
			},
			{
				label: '操作',
				fixed: 'right',
				showOverflowTooltip: false,
				width: 200
			}
		]
	});

function updateState(row) {
	updateStateDefinition({
		deployId: row.deploymentId,
		state: row.suspensionState == 1 ? 2 : 1
	}).then(() => {
		msgSuccess('更新成功');
		getList();
	});
}

function handleDelete(row) {
	confirmFn('此操作将删除选中数据, 是否继续?')
		.then(() => {
			deleteTask({ deployId: row.deploymentId }).then(() => {
				msgSuccess('删除成功');
				getList();
			});
		})
		.catch(() => {
			msgInfo('已取消删除！');
		});
}

$store.dict.GETflowForm();
// 表格数据
const refTable = ref(null);
const { loadData, getList } = pageMixin({
	queryParams,
	queryFormItem,
	state,
	api: { page },
	refTable
});
</script>

<style lang="scss" scoped></style>
